import {defineComponent, reactive, ref, watchEffect} from "vue"
import "../css/index.css"
import {getToken} from "@/utils/auth";
import {ElMessage} from "element-plus";
import BasicEditor from "@/components/BasicEditor/index.vue";

export default defineComponent({
    props: {
        visible: {
            type: Object, default: {}
        },
        isDetail: {
            type: Boolean, default: false
        },
        closeDia: {
            type: Function, default: () => {
            }
        },
        saveDia: {
            type: Function, default: () => {
            }
        },
        handleAdd: {
            type: Function, default: () => {
            }
        },
        diaForm: {
            type: Object, default: {}
        },
        changeValue: {
            type: Function, default: () => {
            }
        },
        diaTitle: {
            type: String,
            default: ""
        }

    }, setup(props) {
        const formRef = ref(null)
        const fileList = ref([])
        const rules = reactive({
            info_img: [
                {required: true, message: '请输入', trigger: 'blur'},
            ],
            info_title: [
                {required: true, message: '请输入', trigger: 'blur'},
            ],
            info_content: [
                {required: true, message: '请输入', trigger: 'blur'},
            ]
        })

        // 表单校验
        const validateForm = async () => {
            if(fileList.value[0]?.response){
                props.diaForm.info_img = import.meta.env.VITE_SEARVER_HOST + "/" + fileList.value[0].response.result.img_url
            }

            await formRef.value.validate((valid, fields) => {
                if (valid) {
                    if (props.diaTitle === "新增资讯") {
                        props.handleAdd()
                    } else {
                        props.saveDia()
                    }
                    formRef.resetFields()
                }
            })
        }

        const handleAvatarSuccess = (response, uploadFile) => {
            if (fileList.value.length > 1) {
                fileList.value.shift()
            }
        }

        const beforeAvatarUpload = (rawFile) => {
            if (rawFile.size / 1024 / 1024 > 2) {
                ElMessage.error('Avatar picture size can not exceed 2MB!')
                return false
            }
            return true
        }

        watchEffect(() => {
            fileList.value = []
            // 初始化图片
            if (props.diaForm.info_img) {
                const arr = props.diaForm.info_img.split(',');
                arr && arr.forEach(a => {
                    fileList.value.push({
                        //由于图片
                        name: a.length > 6 ? a.substring(a.length - 6) : a,
                        url: a,
                    })
                })
            }
        })

        return (props) => {
            return (
                <>
                    <el-dialog
                        v-model={props.visible.value}
                        title={props.diaTitle}
                        width={'70%'}
                        show-close>
                        <el-form
                            model={props.diaForm}
                            ref={formRef}
                            rules={rules}
                            label-width={'120px'}>
                            <el-form-item label={"资讯封面图"} prop={'info_img'}>
                                <el-upload
                                    v-model:file-list={fileList.value}
                                    className="avatar-uploader"
                                    list-type={"picture-card"}
                                    action={'/api/other/upload'}
                                    headers={{
                                        'Authorization': 'Bearer ' + getToken()
                                    }}
                                    onSuccess={handleAvatarSuccess}
                                    beforeUpload={beforeAvatarUpload}
                                >
                                    <el-icon><Plus/></el-icon>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label={"资讯标题"} prop={'info_title'}>
                                <el-input v-model={props.diaForm.info_title}/>
                            </el-form-item>
                            <el-form-item label={"资讯内容"} prop={'info_content'}>
                                <BasicEditor valueContent={props.diaForm.info_content} changeName={'info_content'} changeValue={props.changeValue}></BasicEditor>
                            </el-form-item>
                        </el-form>
                        <div className={"diaFooter"}>
                        <span className="dialog-footer">
                            {
                                props.isDetail ? <>
                                        <el-button onClick={props.closeDia}>关闭</el-button>
                                    </> :
                                    <>
                                        <el-button onClick={props.closeDia}>取消</el-button>
                                        <el-button
                                            type="primary"
                                            onClick={validateForm}>保存
                                        </el-button>
                                    </>
                            }

                    </span>
                        </div>
                    </el-dialog>
                </>
            )
        }
    }
})